<template>
  <div class="data-main-div" style="margin-top:0">
     <pumsData ref="pumsData" v-if="curIndex == 1" :userList="userList" :classList="classList" :goodsList="goodsList"></pumsData>
     <supplierData ref="supplierData" v-if="curIndex == 2" :userList="userList" :classList="classList" :goodsList="goodsList"></supplierData>
     <pumsInquiryData ref="pumsInquiryData" v-if="curIndex == 3" :userList="userList" :classList="classList" :goodsList="goodsList"></pumsInquiryData>
     <div class="data-menu" :style="{'right':isOpen ? 0 : '-104px'}">
        <div class="data-menu-title" @click="isOpen = !isOpen">
           <i class="el-icon-arrow-right" v-if="isOpen"></i>
           <i class="el-icon-arrow-left" v-else></i>
        </div>
        <div class="data-menu-con pums">
          <div class="menu-item" :class="{'choose':curIndex==1}" @click="changeMenu(1)">销售分析</div>
          <div class="menu-item" :class="{'choose':curIndex==2}" @click="changeMenu(2)">供应商分析</div>
          <div class="menu-item" :class="{'choose':curIndex==3}" @click="changeMenu(3)">询盘成交</div>
        </div>
     </div>
  </div>
</template>

<script>
  import {goodsCategoryList} from '@/api/data.js'
  import {getOrderUsersList,orderGoodsList} from '@/api/partner'
  import pumsData  from './components/pumsData'
  import supplierData  from './components/supplierData'
  import pumsInquiryData  from './components/pumsInquiryData'
  import '@/styles/data.scss'
  export default {
    name: 'pumsDataStatistics',
    data() {

      return {
        isOpen:true,
        curIndex:1,
        userList:[],
        classList:[],
        goodsList:[]
      }
    },
    filters: {



    },
    created(){
      this.getUserList()
      this.getClassList()
      this.getgoodsList()

    },
    computed: {


    },
    components:{
      pumsData,supplierData,pumsInquiryData
    },
    methods: {
      changeMenu(index){
        this.curIndex = index
        window.scrollTo(0, 0);
      },
      getUserList(){
        getOrderUsersList({departmentId:3,status:1}).then((res)=>{
          this.userList = res;
        })
      },
      getClassList(){
        goodsCategoryList().then((res)=>{
          this.classList = res
        })
      },
      getgoodsList(){
        orderGoodsList().then((res)=>{
          this.goodsList = res.list
        })
      },
    }
  }
</script>
<style lang="scss">
   .data-main-div{
     padding:16px;
     .data-block{
       background: #fff;
       border-radius: 8px;
     }
     .data-menu{
       position: fixed;
       right:0;
       bottom:40px;
       display: flex;
       justify-items: flex-start;
       align-items: center;
       transition: right 0.3s;
       z-index: 9999;
       .data-menu-title{
         background: #5e83f1;
         border-bottom-left-radius: 8px;
         border-top-left-radius: 8px;
         height:40px;
         width:30px;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         color:#fff;
         cursor: pointer;
         text-align: center;
         line-height: 40px;
       }
       .data-menu-con.pums{
         width:114px;
       }
       .data-menu-con{
         width:100px;
         border-bottom-left-radius: 8px;
         border-top-left-radius: 8px;
         padding:0 12px;
         background: #fff;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
         .menu-item{
           font-size: 14px;
           color:#000;
           border-bottom: 1px solid #DCDFE6;
           cursor: pointer;
           padding:10px;
           line-height: 30px;
         }
         .menu-item:last-child{
           border-bottom: 0px solid #DCDFE6;
         }
         .menu-item.choose{
           color:#5c80ec
         }
         .menu-item.choose:hover{
           color:#5c80ec
         }
         .menu-item:hover{
           color:#888
         }
       }
     }
   }
</style>

